<template>
  <!-- 这个页面是最基本的用法 -->
  <MarkDisplay :markdown="md" keyboard-ctrl />
</template>

<script>
import MarkDisplay from "vue-mark-display";

const md = `
# 这里是第一页

以及一些基本的自我介绍
<div class="notification">Welcome!</div>

----
<!-- style: background: #f99; color: white; -->

## 这里是第二页

- 这里有内容
- 这里有内容
- 这里有内容

----

没了，讲完了
<div class="notification">Thanks!</div>

__谢谢__
`;

export default {
  components: { MarkDisplay },
  data: () => ({ md })
};
</script>

<style>
/* 默认 */
/* body {
  margin: 0;
  overflow: hidden;
} */

/* 全局皮肤样式 */
@import "~@/assets/styles/demo.css";

/* 演示写入HTML5代码样式 */
.notification {
  position: absolute;
  top: 20px;
  right: 20px;
  border-radius: 3px;
  padding: 0.25em 1em;
  background-color: yellow;
  color: #666;
}
</style>
